<template>
  <!--  配置版本管理-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-select v-model="form.goodsEnum" style="width: 150px;" clearable placeholder="货品类型">
        <el-option
          v-for="item in EnumGoodsTypeList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.goodsTypeId" style="width: 150px;" clearable placeholder="货品分类">
        <el-option
          v-for="item in GoodsTypeList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.stokeStatus" style="width: 150px;" clearable placeholder="库存状态">
        <el-option
          v-for="item in EnumStokeStatusList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.companyId" filterable placeholder="请选择供应商" clearable>
        <el-option
          v-for="item in companyList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.storehouseId" filterable placeholder="请选择存放仓库" clearable @change="changeStorehouse2">
        <el-option
          v-for="item in storehouseList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.shelvesId" filterable placeholder="请选择存放货架" clearable @focus="getShelvesList2">
        <el-option
          v-for="item in shelvesList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-input v-model="form.queryString" clearable placeholder="请输入货品编号/名称/规格">
        <template slot="prepend">货品编号/名称/规格</template>
      </el-input>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" slot="reference" class="common_btn-small" @click="addGoods">新增货品</el-button>
      <!-- table -->
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="picUrl" label="照片" min-width="100">
          <template slot-scope="scope">
            <el-image style="width: 80px; height: 60px;cursor: pointer;" :src="constUrl + scope.row.picUrl"
                      fit="fill" @click="previewImg(constUrl + scope.row.picUrl)">
              <div slot="error" style="width: 80px; height: 60px;text-align: center;line-height: 60px;font-size: 60px">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="goodsNo" label="编号" min-width="125"></el-table-column>
        <el-table-column prop="name" label="名称" show-overflow-tooltip min-width="120"></el-table-column>
        <el-table-column prop="goodsEnumName" label="类别" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.goodsEnum| gradeGoodsEnumColor">
              {{scope.row.goodsEnumName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="goodsTypeName" label="分类" min-width="100"></el-table-column>
        <el-table-column prop="specifications" label="规格型号" min-width="80"></el-table-column>
        <el-table-column prop="unitName" label="单位" min-width="80"></el-table-column>
        <el-table-column prop="stoke" sortable label="库存" min-width="100"></el-table-column>
        <el-table-column prop="stokeStatusName" label="状态" min-width="70">
          <template slot-scope="scope">
            <el-tag :style="scope.row.stokeStatus| gradeStatusColor" style="color: white">
              {{scope.row.stokeStatusName}}
            </el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="storehouseName" label="仓库" min-width="120"></el-table-column>-->
        <el-table-column prop="shelvesName" label="货架" min-width="80"></el-table-column>
        <el-table-column prop="goodsAllocationName" label="货位" min-width="80">
          <template slot-scope="scope">
            <span v-for="item in scope.row.goodsAllocationName"
                  :key="item">{{item}},</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑货品</button>
            <button :class="scope.row.goodsEnum === 1?'btn_prohibit':'btn_add'" @click="handleCompose(scope.row)"
                    :disabled="scope.row.goodsEnum === 1">货品组成
            </button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next" :total="form.total">
      </el-pagination>
      <!--      新增货品-->
      <el-drawer
        :title="dialogTitle"
        :visible.sync="isShowAddDialog"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
        size="50%">
        <div class="demo-drawer__content">
          <!-- 具体form表单 -->
          <el-form label-position="right" ref="goods" label-suffix="：" :rules="rule" :model="goods" label-width="0px">
            <el-divider content-position="left">基本信息</el-divider>
            <div>
              <el-row>
                <el-col :span="4">
                  <el-form-item prop="picUrl">
                    <upload-img avatar v-model="goods.picUrl" :limit="1" :size-limit="1"
                                ref="uploadPic"></upload-img>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item prop="name">
                        <el-input v-model="goods.name" placeholder="请输入">
                          <template slot="prepend">货品名称</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item prop="specifications">
                        <el-input v-model="goods.specifications" placeholder="例如3*4 φ2mm">
                          <template slot="prepend">规格型号</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item prop="goodsEnum">
                        <el-select v-model="goods.goodsEnum" filterable placeholder="请选择货品类型">
                          <el-option
                            v-for="item in EnumGoodsTypeList"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item prop="unitName">
                        <el-select v-model="goods.unitName" filterable placeholder="请选择计量单位">
                          <el-option
                            v-for="item in GoodsUnitList"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item prop="goodsTypeId">
                        <el-select v-model="goods.goodsTypeId" style="width: 90%" filterable placeholder="请选择货品分类">
                          <el-option
                            v-for="item in GoodsTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item prop="companyId">
                        <el-select v-model="goods.companyId" style="width: 90%" clearable filterable
                                   placeholder="请选择供应商">
                          <el-option
                            v-for="item in companyList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                        <i class="el-icon-refresh icon-size" style="cursor: pointer;"
                           @click="removeAllCompanyStorage"></i>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item prop="detail">
                    <el-input v-model="goods.detail" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                              placeholder="货品描述"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-if="hasPermission('erp:goodsStore:edit')">
              <el-divider content-position="left">库存设置</el-divider>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label-width="0px" prop="stoke">
                    <el-input v-model="goods.stoke" clearable placeholder="请输入" type="number">
                      <template slot="prepend">当前库存量</template>
                      <template slot="append">{{goods.unitName}}</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label-width="0px" prop="lowWarning">
                    <el-input v-model="goods.highWarning" clearable placeholder="大于该值提示库存过多" type="number">
                      <template slot="prepend">超储预警值</template>
                      <template slot="append">{{goods.unitName}}</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label-width="0px" prop="highWarning">
                    <el-input v-model="goods.lowWarning" clearable placeholder="小于该值提示库存过少" type="number">
                      <template slot="prepend">缺储预警值</template>
                      <template slot="append">{{goods.unitName}}</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-if="hasPermission('erp:goodsPrice:edit')">
              <el-divider content-position="left">价格管理</el-divider>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label-width="0px" prop="costVolume">
                    <el-input v-model="goods.costVolume" clearable placeholder="请输入" type="number">
                      <template slot="prepend">进货价</template>
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label-width="0px" prop="saleVolume">
                    <el-input v-model="goods.saleVolume" clearable placeholder="请输入" type="number">
                      <template slot="prepend">建议售价</template>
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label-width="0px" prop="lowestVolume">
                    <el-input v-model="goods.lowestVolume" clearable placeholder="请输入" type="number">
                      <template slot="prepend">最低售价</template>
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <el-divider content-position="left">货位信息</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label-width="80px" label="仓库" prop="storehouseId">
                  <el-select v-model="goods.storehouseId" filterable placeholder="请选择存放仓库" @change="changeStorehouse">
                    <el-option
                      v-for="item in storehouseList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="80px" label="货架" prop="shelvesId">
                  <el-select v-model="goods.shelvesId" filterable placeholder="请选择存放货架" @change="changeShelves"
                             @focus="getShelvesList">
                    <el-option
                      v-for="item in shelvesList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-button @click="getLocationList" type="primary"> 选择货位</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="isShowAddDialog=false" type="info">取 消</el-button>
          <el-button type="primary" class=" common_btn-defalut" @click="validateAddForm">确 定</el-button>
        </div>
      </el-drawer>

      <!-- 新增编辑货架弹窗 -->
      <el-dialog title="选择货位" :visible.sync="showLocation" :close-on-click-modal="false"
                 width="1080px">
        <div class="location_class">
          <div v-for="(location,index) in locationList" :key="index">
            <el-row :gutter="20">
              <el-col :span="2">
                <div class="row_class">第{{locationList.length - index}}层</div>
              </el-col>
              <el-col :span="22">
                <div class="location_row_class">
                  <el-checkbox-group v-model="goods.goodsAllocationId">
                    <el-card class="box-card2" v-for="item in location" :key="item.id">
                      <el-image
                        :src="item.hasUse === 1? require('../image/closeBox.png'):require('../image/openBox.png')"
                        class="image2"></el-image>
                      <div class="bottom_info">
                        <el-checkbox :label="item.id" :key="item.id"
                                     :disabled="item.hasUse === 1 && goods.goodsAllocationId.indexOf(item.id) === -1">
                          编号：{{item.row}}-{{item.line}}
                        </el-checkbox>
                        <p style="text-align: center">{{item.name?item.name:'---'}}</p>
                      </div>
                    </el-card>
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </div>
        <!-- 操作按钮 -->
        <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-defalut" type="primary" @click="showLocation = false">确定</el-button>
      </span>
      </el-dialog>

      <!--   货品组成-->
      <el-drawer
        :title="goodsCompose.name + '货品组成'"
        :visible.sync="isShowComposeDialog"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
        size="60%">
        <div class="demo-drawer__content">
          <div class="goods_compose_class">
            <el-button icon="el-icon-plus" type="primary" @click="addGoodsCompose">添加货品</el-button>
            <el-table height="70vh" border :data="goodsCompose.formationListTemp" class="m-t-24">
              <el-table-column label="名称" min-width="260px">
                <template slot-scope="scope">
                  <el-select value-key="id" v-model="scope.row.formation" filterable placeholder="请选择组成货品" clearable>
                    <el-option
                      v-for="item in goodsSelectList"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                      :disabled="disableGoodsSelect.indexOf(item.id) !== -1">
                      <span style="float: left">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.specifications }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="类型" width="100px">
                <template slot-scope="scope">
                  {{scope.row.formation?scope.row.formation.goodsEnumName:'---'}}
                </template>
              </el-table-column>
              <el-table-column label="分类">
                <template slot-scope="scope">
                  {{scope.row.formation?scope.row.formation.goodsTypeName:'---'}}
                </template>
              </el-table-column>
              <el-table-column label="规格" min-width="100px">
                <template slot-scope="scope">
                  {{scope.row.formation?scope.row.formation.specifications:'---'}}
                </template>
              </el-table-column>
              <el-table-column label="数量" min-width="150px">
                <template slot-scope="scope">
                  <el-input-number v-if="scope.row.formation" size="small" :precision="1" :step="0.1" v-model="scope.row.formation.formationNumber"
                                   :min="0.1"></el-input-number>
                  <span v-else>---</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="90">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    class="btn_delete"
                    @click="handleDeleteImg(scope.$index)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="isShowComposeDialog=false" type="info">取 消</el-button>
          <el-button type="primary" class="common_btn-defalut" @click="submitComposeForm">确 定</el-button>
        </div>
      </el-drawer>
    </div>
    <x-loading v-show="isLoading"></x-loading>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>
<script>
import {
  getGoodsList,
  getGoodsUnit,
  getGoodsType,
  addOrUpdateGoods,
  getGoodsCompose,
  addOrUpdateGoodsCompose
} from '@/services/ERP/goods'
import {
  getStorehouseSelectList,
  getShelvesSelectList,
  getLocationSelectList,
} from '@/services/ERP/store'
import ItemMixins from "../item.mixins";
import UploadImg from '@/components/upload-img'
import XLoading from '@/components/animation/x-loading.vue'
import PictureViewer from '@/components/picture-viewer'
import Enums from '@/utils/enums'

// form表单校验规则
export default {
  components: {UploadImg, XLoading, PictureViewer},
  mixins: [ItemMixins,Enums],
  data() {
    return {
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      rule: {
        name: {required: true, message: '请输入名称'},
        goodsEnum: {required: true, message: '请选择货品类型'},
        goodsTypeId: {required: true, message: '请选择货品分类'},
        unitName: {required: true, message: '请选择计量单位'},
        storehouseId: {required: true, message: '请选择存放仓库'},
        shelvesId: {required: true, message: '请选择存放货架'},
      },
      goods: {
        goodsAllocationId: []
      },
      tableList: [],
      EnumGoodsTypeList: [],
      EnumStokeStatusList: [],
      GoodsTypeList: [],
      GoodsUnitList: [],
      storehouseList: [],
      shelvesList: [],
      locationList: [],
      isShowAddDialog: false,
      isLoading: false,
      showLocation: false,
      isShowComposeDialog: false,
      goodsCompose: {},
      allGoodsSelectList: [],
    }
  },
  computed: {
    //货品选择过滤掉自己
    goodsSelectList() {
      let list = this.allGoodsSelectList.filter(x => x.id !== this.goodsCompose.goodsId)
      //如果是半成品，只能选货品。
      if (this.goodsCompose.goodsEnum === 2) {
        list = list.filter(x => x.goodsEnum === 1)
        //如果是产品，不能选产品。
      } else if (this.goodsCompose.goodsEnum === 3) {
        list = list.filter(x => x.goodsEnum !== 3)
      }
      return JSON.parse(JSON.stringify(list))
    },
    //已经选择了的货品不能再选
    disableGoodsSelect() {
      let list = []
      this.goodsCompose.formationListTemp.map(x => {
        if (x.formation) {
          list.push(x.formation.id)
        }
      })
      return list
    },
    // 弹窗的title
    dialogTitle() {
      return this.goods.id ? '编辑货品' : '新增货品'
    },
    companyList() {
      return this.allCompanyList.filter(x => x.type === 1)
    }
  },
  methods: {
    /////////////////////////////////////////////货品组成开始
    //获取半成品和产品的 货品组成列表
    async getGoodsCompose(id) {
      let res = await getGoodsCompose({id: id})
      let list = res.data || []
      let formationListTemp = []
      //处理货品组成数据，用于回显
      list.map(x => {
        this.goodsSelectList.map(y => {
          if (x.formationId === y.id) {
            let temp = JSON.parse(JSON.stringify(y))
            temp.formationNumber = x.formationNumber
            formationListTemp.push({formation: temp})
          }
        })
      })
      this.goodsCompose.formationListTemp = formationListTemp
    },
    //提交货品组成
    async submitComposeForm() {
      let formationList = []
      //处理货品组成数据
      this.goodsCompose.formationListTemp.map(x => {
        formationList.push({
          formationId: x.formation.id,
          formationNumber: x.formation.formationNumber,
        })
      })
      this.goodsCompose.formationList = formationList
      let res = await addOrUpdateGoodsCompose(this.goodsCompose)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '更新成功！'
        })
        this.isShowComposeDialog = false
        this.queryList()
      }
    },
    //添加一个货品组成
    addGoodsCompose() {
      this.goodsCompose.formationListTemp.push({})
    },
    //删除一个货品组成
    handleDeleteImg(index) {
      this.goodsCompose.formationListTemp.splice(index, 1);
    },
    //货品组成弹窗
    handleCompose(row) {
      this.goodsCompose = {
        name: row.name,
        goodsId: row.id,
        goodsEnum: row.goodsEnum,
        formationListTemp: []
      }
      this.getGoodsCompose(row.id)
      this.isShowComposeDialog = true
    },
    // 查看大图
    previewImg(url) {
      let list = [url]
      this.$refs.imageViewer.showViewer(list, 0)
    },
    //获取仓库选项
    async getStorehouseList() {
      let res = await getStorehouseSelectList()
      this.storehouseList = res.data || []
    },
    async changeStorehouse2() {
      let res = await getShelvesSelectList({id: this.form.storehouseId})
      this.shelvesList = res.data || []
    },
    async changeStorehouse() {
      let res = await getShelvesSelectList({id: this.goods.storehouseId})
      this.shelvesList = res.data || []
    },
    //获取货架选项
    async getShelvesList2() {
      if (!this.form.storehouseId) {
        this.$message('请先选择仓库！');
        return
      }
    },
    //获取货架选项
    async getShelvesList() {
      if (!this.goods.storehouseId) {
        this.$message('请先选择仓库！');
        return
      }
    },
    async changeShelves() {
      let res = await getLocationSelectList({id: this.goods.shelvesId})
      this.locationList = res.data || []
    },
    //获取仓库选项
    getLocationList() {
      if (!this.goods.shelvesId) {
        this.$message('请先选择货架！');
        return
      }
      this.showLocation = true
    },
    //获取产品分类选项
    async getGoodsTypeList() {
      let res = await getGoodsType()
      this.GoodsTypeList = res.data || []
    },
    //获取产品计量单位选项
    async getGoodsUnitList() {
      let res = await getGoodsUnit()
      this.GoodsUnitList = res.data || []
    },
    // 表单提交
    validateAddForm() {
      this.$refs.goods.validate((valid) => {
        if (valid) {
          this.submitGoods()
        }
      })
    },
    //提交货品
    async submitGoods() {
      let res = await addOrUpdateGoods(this.goods)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.goods.id ? '更新成功！' : '添加成功！'
        })
        this.isShowAddDialog = false
        this.queryList()
        //清除货品缓存
        this.removeAllGoodsStorage()
      }
    },
    addGoods() {
      this.isShowAddDialog = true
      this.goods = {
        goodsAllocationId: [],
        picUrl: '',
        storehouseId: this.storehouseList[0]?.id || ''
      }
      this.changeStorehouse()
      this.$nextTick(() => {
        this.$refs.goods.clearValidate()
      })
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    async queryList() {
      this.isLoading = true
      let res = await getGoodsList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
      this.isLoading = false
    },
    handleEdit(row) {
      this.goods = JSON.parse(JSON.stringify(row))
      if (this.goods.storehouseId) {
        this.changeStorehouse()
      }
      if (this.goods.shelvesId) {
        this.changeShelves()
      }
      this.isShowAddDialog = true
      this.$nextTick(() => {
        this.$refs.goods.clearValidate()
      })
    },
  },
  mounted() {
    this.queryList()
    this.queryDictList(['EnumGoodsType', 'EnumStokeStatus'], ['EnumGoodsTypeList', 'EnumStokeStatusList'])
  },
  //每次进入页面都会加载
  activated() {
    this.getGoodsTypeList()
    this.getGoodsUnitList()
    this.getStorehouseList()
    this.getAllGoodsSelectList()
    this.getAllCompanyList()
  }

}
</script>

<style lang="less" scoped>

  /deep/ .el-table td, .el-table th {
    padding: 5px 0;

    .el-input-number {
      width: 120px;
    }

    .el-input-number__decrease, .el-input-number__increase {
      width: 30px;
    }
  }

  .el-divider__text {
    font-size: 20px;
  }

  .title_class {
    padding: 5px 20px;
    text-align: left;
    background-color: #2196f3;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 20px;
  }

  /deep/ .el-input-group__prepend {
    border-right: 0;
    background: #2196f3;
    color: white;
  }

  .row_class {
    background: #03a9f4;
    text-align: center;
    line-height: 160px;
    margin: 12px 0px;
    border-radius: 5px;
    height: 150px;
    color: white;
    font-size: 18px;
  }

  .location_row_class {
    overflow: auto;
    white-space: nowrap;
  }

  .box-card2 {
    text-align: center;
    width: 120px;
    margin: 5px;
    height: 150px;
    display: inline-block;

    p {
      line-height: 20px;
      font-size: 10px;
    }

    .bottom_info {
      padding: 5px;
      text-align: left;
      background: #1990FE;
      color: white;
      font-weight: 600;
    }

    /deep/ .el-input-group__append {
      background-color: #2196f3;
      color: white;
      padding: 0 5px !important;
      border: none;
    }

    /deep/ .el-input-group__prepend {
      padding: 0 5px !important;
      border: none;
    }

    /deep/ .el-card__body {
      padding: 0px;
    }
  }

  .image2 {
    height: 100px;
  }


  /deep/ .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 30px 0;
  }

  .location_class {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;

    /deep/ .el-divider--horizontal {
      margin: 5px 0;
    }

    /deep/ .el-checkbox {
      color: #ffffff;
    }

    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #ffffff;
    }
  }

  .goods_compose_class {
    padding: 20px;
  }
</style>
